<template>
    <div class="Listofinstitutions">
        <!-- <div class="conetent-nav">
            <div class="conetent-nav-head">
                <img src="/images/logo.png" class="logo" @click="Goindex()">
                <ul>
                    <li v-for="(item,index) in tablesList" :key="index" :class="tablesListindex ==index?'selctestye':''" @click="checket(index)">{{item}}</li>
                  
                    <li class="conetent-nav-my-center">
                        <el-menu class="el-menu-demo" mode="horizontal">
                            <el-submenu index="2">
                                <template slot="title">个人中心</template>
                             
                                <el-menu-item @click="Modify(0)">个人信息</el-menu-item>
                              
                                <el-menu-item @click="Logout">退出登录</el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </li>
                </ul>
            </div>
        </div> -->
        <div class="conetnst">
            <div class="conetnst-heads">
                <div class="heeadser">
                    <v-distpicker province="浙江省" city="杭州市" area="下沙区" @selected="onSelected"></v-distpicker>
                    <div class="srrcah">
                       <el-input v-model="input" placeholder="搜索机构名称"></el-input>
                       <span>搜索</span>
                    </div>
                </div>
            </div>
            <div class="contents-list">
                <div class="titles"> 
                    <h3>加盟机构</h3>
                    <label>
                        <span>智能排序</span>
                        <span>距离</span>
                    </label>
                </div>
                <div class="Lists">
                    <ul>
                        <li v-for="(item1,index1) in affiliatesImg" :key="index1" @click="Todetial(item1)">
                            <div>
                                <img :src="item1.mechanism_logo" alt="">
                            </div>
                            <div class="listinfos">
                                <h3>{{item1.mechanism_name}}</h3>
                                <el-rate v-model="value1" disabled></el-rate>
                                <span>{{item1.mechanism_telephone}}</span>
                                <span>{{item1.mechanism_addr}}</span>
                                <span class="lookmap" @click.stop="lookmap(item1)">查看地图</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="Lvie-cl-de-con-pagination">
                    <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="affiliatesImg.length"></el-pagination>
                </div>
            </div>
        </div>
        <div v-show="Isshow">
            <!--这里是要展示的内容层-->
            <div class="login">
                <div class="popupcontents">
                    <div id="map"></div>
                </div>
            </div>
            <!--这里是半透明背景层-->
            <div class="over" @click="Isshow=false"></div>
        </div>
    </div>
</template>
<script>
import opyions from '../../../public/citys/city'
import VDistpicker from 'v-distpicker'
import Footer from '../../components/footer'
export default {
    name:'Listofinstitutions',
    data(){
        return{
            input: '',
            value1:3.5,
            Isshow:false,
            tablesList:['学习中心','教学中心','直播课堂','场景直播'],
            tablesListindex:this.$route.query.index,
            latitude:localStorage.getItem('latitude'),
            longitude:localStorage.getItem('longitude'),
            affiliatesImg:[],
            currentPage:1,
            IsLogins:'',
        }
    },
    created(){
        if(JSON.parse(localStorage.getItem('userinfo')) == undefined || JSON.parse(localStorage.getItem('userinfo')) == ''){
            this.IsLogins = false
        }else{
            this.IsLogins = true
        }
        this.toTop()
    },
    mounted(){
        this.Getjigouinfo()
    },
    components: { VDistpicker,Footer },
    methods:{
        toTop() {
            let top = document.documentElement.scrollTop || document.body.scrollTop;// 实现滚动效果 
            const timeTop = setInterval(() => {
                document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
                if (top <= 0) {
                    clearInterval(timeTop);
                }
            }, 10);
        },
        onSelected(data) {
            this.address.province = data.province.value
            this.address.city = data.city.value
            this.address.county = data.area.value
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.Getjigouinfo();
        },
        Goindex(){
            this.$router.push({path:'/'})
        },
        Todetial(e){
            this.$router.push({ path: "/views/Agencdetails",query: {id:e.id,longitude:e.longitude,latitude:e.latitude} })
            // if(this.IsLogins){
            //     let routeData = this.$router.resolve({ path: "/views/Agencdetails",query: {id:e.id,longitude:e.longitude,latitude:e.latitude} });
            //     window.open(routeData.href, '_blank');
            // }else{
            //     this.$message({duration:1000,message:'请先登录',type:'warning'})
            // }
            
        },
        Getjigouinfo(){//获取加盟机构
            var _this = this
            console.log(_this.longitude,'00000')
            var data = {
                latitude:this.latitude,
                longitude:this.longitude,
                status:2,
                currentPage:this.currentPage,
                type:'offline_mechanism'
            }
            this.$axios({
                method: "get",
                url:"http://101.37.66.151:8768/eg-api/user/mastermechanism/queryNearbyListPage",
                params: data}).then(res => {
                console.log(res.data.data,'机构')
                _this.affiliatesImg = res.data.data
            }).catch(error => {
                console.log(error);
            });
        },
        lookmap(e){
            this.Isshow = true
            var map = new BMap.Map("map");    // 创建Map实例
            var point = new BMap.Point(e.longitude,e.latitude);
            map.centerAndZoom(point, 40);  // 初始化地图,设置中心点坐标和地图级别
            var geoc = new BMap.Geocoder()
            geoc.getLocation(point, function(rs){
                console.log(point)
                var addComp = rs.addressComponents;
                map.addOverlay(new BMap.Marker(point));
            });   
            var navigationControl = new BMap.NavigationControl({// 靠左上角位置
                anchor: BMAP_ANCHOR_TOP_LEFT,// LARGE类型
                type: BMAP_NAVIGATION_CONTROL_LARGE,// 启用显示定位
                enableGeolocation: true
            });
            map.addControl(navigationControl);// 添加定位控件 
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            map.addControl(new BMap.MapTypeControl({
            mapTypes:[
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]}));	  
        }
    }
}
</script>
<style lang="less" scoped>
    .Listofinstitutions{
        position: relative;
        width: 100%;
        background:rgba(241,241,241,1);
        margin-top: 80px;
    }
    .conetnst{
        position: relative;
        width: 1400px;
        margin: 0 auto;
    }
    .conetnst-heads{
        position: relative;
        width: 100%;
        height: 100px;
        background: #ffffff;
        border-radius: 20px;
        top: 40px;
    }
    .heeadser{
        width: 90%;
        margin: 0 auto;
        padding-top: 30px;
        display: flex;
        // /deep/.distpicker-address-wrapper{

        // }
    }
    .srrcah{
        margin-left: auto;
        display: flex;
        /deep/.el-input{
            height: 33px;
            margin-right: 20px;
            /deep/.el-input__inner{
                height: 33px;
                border-radius: 20px;
            }
        }
        span{
            display: inline-block;
            width:120px;
            height:33px;
            text-align: center;
            line-height: 33px;
            color: #ffffff;
            background:rgba(71,206,207,1);
            border-radius:17px;
            cursor: pointer;
        }
    }
    .contents-list{
        position: relative;
        width: 100%;
        margin-top: 70px;
        bottom: 20px;
        background: #ffffff;
    }
    .titles{
        display: flex;
        // padding-top: 10px;
        width: 90%;
        margin: 0 auto;
        align-items: center;
        border-bottom: 1px solid rgba(228,228,228,1);
        label{
            margin-left: auto;
            span{
                display: inline-block;
                margin-left: 30px;
                cursor: pointer;
            }
        }
    }
    .Lists{
        position: relative;
        width: 90%;
        margin: 0 auto;
        bottom: 0px;
        ul{
            width: 100%;
            padding: 0;
            list-style: none;
            li{
                width: 100%;
                padding-left: 30px;
                border-bottom: 1px solid rgba(228,228,228,1);
                display: flex;
                padding-bottom: 20px;
                margin-top: 20px;
                cursor: pointer;
            }
            img{
                width: 230px;
                height: 168px;
                border-radius: 20px;
            }
        }
    }
    .listinfos{
        display: flex;
        flex-wrap: wrap;
        padding-left: 30px;
        align-items: center;
        cursor: pointer;
        h3{
            width: 100%;
            margin: 0;
            font-size: 18px;
            color: #2A2A2A;
            cursor: pointer;
        }
        div{
            width: 100%;
        }
        span{
            display: inline-block;
            width: 100%;
            color: #C9C9C9;
            font-size: 13px;
            cursor: pointer;
        }
    }
    .lookmap{
        color: #47CECF!important;
        background-image: url('/images/椭圆 31@2x.png');
        background-repeat: no-repeat;
        background-size: 11px 13px;
        background-position-x: 14%;
        background-position-y: 50%;
        cursor: pointer;
    }
    /*弹窗样式*/
    .login {
        position: fixed;
        font-size: 24px;
        height: 576px;
        width: 1063px;
        border-radius:10px;
        background-color: #ffffff;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1003;
    }
    .over {
        position: fixed;
        width: 100%;
        height: 100%;
        opacity: 0.7;
        filter: alpha(opacity=70);
        top: 0;
        left: 0;
        z-index: 1002;
        background-color: #111111;
    }
    .popupcontents{
        position: relative;
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }
    .popupcontents>div{
        width: 1063px;
        height: 576px;
        overflow: hidden;
        border-radius: 20px;
    }
    .Lvie-cl-de-con-pagination{
        position: relative;
        width: 100%;
        height: 100px;
        margin-top: 100px;
        // margin-bottom: 40px;
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
    }
    .Lvie-cl-de-con-footer{
        background: #ffffff;
    }

    //导航样式
    .conetent-nav{
        display:flex;
        align-items: center;
        width: 100%;
        height: 80px;
        background: #47CECF;
        
    }
    .conetent-nav-head{
        position: relative;
        width: 1400px;
        height: 100%;
        margin:  0 auto;
        display: flex;
        align-items: center;
        ul{
            display: flex;
            list-style: none;
            width: 60%;
            height: 80px;
            align-items: center;
            justify-content: center;
            margin-left: auto;
            li{
                flex: 1;
                height: 100%;
                line-height: 80px;
                text-align: center;
                color: #FFFFFF;
                font-size: 18px;
                cursor: pointer;
            }
        }
    }
    .logo{
        width: 200px;
        height: 34px;
        cursor: pointer;
    }
    .selctestye{
        color: red;
        background:rgba(39,180,181,1);
    }
    .conetent-nav-head>ul>li:last-child{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .conetent-nav-info{
        width: 25px;
        height: 25px;
        margin-top: 26px;
    }
    .conetent-nav-my-center{
        text-align: center;
        margin-left: 4%;
        /deep/ .el-menu-demo{
            width: 100%;
            background: none;
        }
    }
    .conetent-nav-my-center /deep/.el-submenu__title{
        width:120px!important;
        height:35px!important;
        background:rgba(255,255,255,1);
        border-radius:18px;
        margin-top: 20px!important;
        line-height: 40px!important;
        color: #64C6C9!important;
    }
    //end
</style>